<template>
  <view class="widget-video">
    <view class="scroll-video-box" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"
      :style="{'marginTop':marginTop+'px','transition':transition}">
      <view class="video-box" v-for="(item, index) in videoList" :key="index" >
       <video v-if="item.thread.extension" @click="pauseVideo" :id="`video_${item.thread.pid}`"
          class="fullscreen-video" :src="item.thread.extension.video.mediaUrl"
          :poster="item.thread.extension.video.coverUrl" controls :show-progress="false" :show-fullscreen-btn="false"
          :show-play-btn="false" :loop="true" :autoplay="index == 0" :show-center-play-btn="false">
        </video>
        <view class="video-info" v-if="currentIndex==index">
          <view class="atavar-box">
            <image class="atavar-img" :src="item.user.avatar" mode="widthFix"></image>
            <image class="follow" @click="follow(item,index)" src="https://www.qiyaoshuizu.cn/static/plus.png">
            </image>
          </view>
          <view class="icon-box "  @click="toggleFabulous(item, index)">
            <image v-if="item.thread.isLiked" src="https://www.qiyaoshuizu.cn/static/hart.png" class="hart"></image>
            <image v-else src="https://www.qiyaoshuizu.cn/static/hart0.png" class="hart"></image>
            <view class="count-text">{{ item.thread.likedCount}}</view>
          </view>
          <view class="message-box" @click="commontAdd(item.thread.pid)">
            <qui-icon name="icon-message"></qui-icon>
            <text>{{item.thread.postCount}}</text>
          </view>
          <view class="icon-box" @click="shareClick(item,index)">
            <qui-icon name="icon-share"></qui-icon>
            <text>{{item.thread.replyCount}}</text>

          </view>
        </view>
        <view class="video-title" v-if="currentIndex==index">
          <view class="user-name">@{{item.user.userName}}</view>
          <view class="video-content">
            {{item.thread.title}}
          </view>
        </view>
        <view class="head" @click="gotoBack">
          <uni-row>
            <uni-col :span="2">
              <qui-icon name="icon-back1" size="38"></qui-icon>
            </uni-col>
            <uni-col :span="22"></uni-col>
          </uni-row>
        </view>
      </view>
    </view>





    <uni-popup ref="deletePopup" type="center">
      <uni-popup-dialog type="warn" :content="deleteTip" :before-close="true" @close="handleClickCancel"
        @confirm="handleClickOk"></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
  // #ifdef H5
  import wxshare from '@/mixin/wxshare-h5';
  // #endif
  import {
    modifyPostContentHtml
  } from '@/utils/transformHtml';
  import apiRequest from '@/api/new-api';
  export default {
    data() {
      return {
        // 双击点赞记录
        fabulousArr: [],
        // 记录点击时间判断单击还是双击，单击暂停，双击点赞
        clickTimer: null,
        // 记录点击时间
        clickTime: 0,
        // 屏幕高度
        windowHeight: uni.getSystemInfoSync().windowHeight || window.innerHeight,
        // 动画效果
        transition: 'none',
        // 触摸开始值
        startY: 0,
        // 触摸移动值
        moveY: 0,
        // 滑动开始时间
        startTime: 0,
        // 向上滑动距离
        marginTop: 0,
        // 每次向上滑动的距离
        fixMarginTop: 0,
        // 滑动方向
        moveDirection: '',
        // 当前轮播的index
        currentIndex: 0,
        // 当前页的视频对象
        currentVideo: null,
        // 视频状态：播放/暂停
        currentStatus: 'play',
        videoList: [],
        page: 1,
        pageSize: 2,
        // 是否显示评论
        commontShow: false,
        // 评论列表

        comment_page: 1,
        comment_pagesize: 2,
        sortVal: 'createdAt', // 排序值
        formData: {}, // 图片请求data
        commentId: '', // 评论id
        postIndex: '', // 点击主题评论时的index
        footerShow: true, // 默认显示底部
        // commentShow: false, // 显示评论
        commentPopupStatus: false, // 回复弹框内容状态是否显示
        commentWorkTips: true, // 回复弹框是否显示字数
        commentText: true, // 回复弹框默认字
        maxTextLength: 5000, // 默认最多输入5000字
        cursor: 0, // 光标位置
        textAreaValue: '', // 评论输入框
        barStatus: false, // 是否显示输入框获取焦点时完成的那一栏
        uploadFile: [], // 上传的文件
        canReward: false, // 是否开启打赏权限
        rewardStatus: false, // 是否已有打赏数据
        likedStatus: false, // 是否已有点赞数据
        commentStatus: {}, // 回复状态
        commentReply: false, // 发布的是否是回复的回复
        commentAnser: false, // 发布是否是回答问题
        emojiShow: false, // 表情组件显示状态
        // uploaderShow: false, //图片上传组件显示状态
        publishClickStatus: true, // 发布按钮点击状态
        focusVal: true, // 默认输入框获取焦点状态
        forumsInfo: {}, // 后台站点信息
        thread: {
          thread: {
            postCount: 0
          }
        }, //当前主题
        posts: [], // 评论列表数据
        splitLists: [], // 评论列表分割二维数组
        currentPostData: {},
        splitSize: 10, // 列表分割size
        sortSeleShow: false, // 排序菜单状态
        deleteTip: '确定删除吗？', // 删除提示
      };
    },
    mixins: [
      // #ifdef H5
      wxshare,
      // #endif
    ],
    onLoad(e) {
      this.thread_id = e.thread_id;
      this.loadData();

    },

    methods: {
      // 语言包
      // topic详情页语言包

      // 回复文本域失去焦点时，获取光标位置
      contBlur(e) {
        this.cursor = e.detail.cursor;
      },

      // 点击@跳转到@页
      callClick() {
        uni.navigateTo({
          url: '/pages/user/at-member'
        });
      },
      // 触摸开始
      touchStart(e) {
        this.transition = 'none';
        this.startY = e.touches[0].pageY;
        this.startTime = new Date().getTime();
      },
      // 触摸滑动
      touchMove(e) {
        // 如果评论面板打开，禁止滑动
        if (this.commontShow) {
          return;
        }
        this.moveY = e.touches[0].pageY;
        if (this.moveY > this.startY) {
          // 返回上一个视频
          let range = this.fixMarginTop + this.moveY - this.startY;
          if (this.currentIndex == 0) {
            this.marginTop = range > 100 ? 100 : range;
          } else {
            this.marginTop = range;
          }
          this.moveDirection = 'up';
        } else {
          // 查看下一个视频
          let range = this.fixMarginTop - this.startY + this.moveY;
          if (this.currentIndex == this.videoList.length - 1) {
            // 最后一个视频的位置
            let lastVideo = -this.currentIndex * this.windowHeight + -50;
            this.marginTop = range < lastVideo ? lastVideo : range;
          } else {
            this.marginTop = range;
          }
          this.moveDirection = 'down';
        }
      },
      // 触摸结束
      touchEnd(e) {
        this.transition = 'all .2s';
        let millisecond = new Date().getTime() - this.startTime;
        let condition1 = this.moveY > 0 && Math.abs(this.moveY - this.startY) > 50 && millisecond < 500;
        let condition2 = this.moveY > 0 && Math.abs(this.moveY - this.startY) > this.windowHeight / 3;
        if (condition1 || condition2) {
          if (this.moveDirection == 'up') {
            // 返回上一个
            if (this.currentIndex == 0) {
              this.marginTop = 0;
            } else {
              this.marginTop = this.fixMarginTop + this.windowHeight;
              this.currentIndex = this.currentIndex - 1;
              this.videoPlayChange();
            }
          } else {
            // 查看下一个
            if (this.currentIndex == this.videoList.length - 1) {

              this.page++;
              this.loadData();
              // this.marginTop = this.fixMarginTop;

            } else {
              this.marginTop = this.fixMarginTop - this.windowHeight;
              this.currentIndex = this.currentIndex + 1;
              this.videoPlayChange();
            }


          }
        } else {
          this.marginTop = this.fixMarginTop;
        }
        this.fixMarginTop = this.marginTop;
        this.startY = 0;
        this.moveY = 0;
      },
      // 滑动切换
      videoPlayChange() {
        this.stopOtherVideo();
        let video = uni.createVideoContext(`video_${this.videoList[this.currentIndex].thread.pid}`, this);
        video.play();
        this.currentStatus = 'play';
        this.currentVideo = video;
      },
      // 暂停其他视频
      stopOtherVideo() {
        this.videoList.map(v => {
          let video = uni.createVideoContext(`video_${v.thread.pid}`, this);
          // video.stop();
          video.seek(1);
          video.pause();
        })
      },
      // 暂停/播放视频/双击点赞事件
      pauseVideo(e) {
        if (this.commontShow) {
          this.commontShow = false;
          return;
        }
        clearTimeout(this.clickTimer);
        let currentTime = new Date().getTime();
        let timeRange = currentTime - this.clickTime;
        if (timeRange < 300) {
          // 双击事件
          this.dbClickAnimation(e);

        } else {
          // 单击事件
          this.clickTimer = setTimeout(() => {
            e.preventDefault();
            e.stopPropagation();
            if (this.currentStatus == 'play') {
              this.currentVideo.pause();
              this.currentStatus = 'pause';
            } else {
              this.currentVideo.play();
              this.currentStatus = 'play';
            }
          }, 300);
        }
        this.clickTime = new Date().getTime();
      },
      // 双击点赞动画
      dbClickAnimation(e) {
        let deg = Math.round(Math.random() * 40 + 5);
        this.fabulousArr.push({
          left: e.detail.x - 25 + 'px',
          top: e.detail.y - 25 + 'px',
          transform: 'rotate(' + (deg % 2 == 0 ? deg : -deg) + 'deg)'
        })
        console.log(this.fabulousArr);
        let index = this.fabulousArr.length - 1;
        setTimeout(() => {
          this.$set(this.fabulousArr, index, Object.assign(this.fabulousArr[index], {
            opacity: 0,
            transform: 'scale(3) ' + this.fabulousArr[index].transform
          }))
        }, 500);
        setTimeout(() => {
          this.fabulousArr.shift();
        }, 1000);
        if (!this.videoList[this.currentIndex].isFabulous) {
          this.$set(this.videoList, this.currentIndex, Object.assign(this.videoList[this.currentIndex], {
            isFabulous: 1
          }))
        }
      },
      // 点赞切换
      toggleFabulous(item, index) {
        item.thread.isLiked = !item.thread.isLiked;
        if (item.thread.isLiked) {
          item.thread.likedCount = item.thread.likedCount + 1;
        } else {
          item.thread.likedCount = item.thread.likedCount - 1;
        }
        this.$set(this.videoList, index, item);
        const jvObj = {
          type: 'posts',
          id: item.thread.firstPostId,
        };
        let params = {
          _jv: jvObj,
          isLiked: item.thread.isLiked,
        };

        this.$store
          .dispatch('jv/patch', params)
          .then(data => {});
      },
      follow(item, index) {
        const params = {
          include: ['groups', 'dialog'],
        };
        this.$store
          .dispatch('jv/get', [`users/${item.user.pid}`, {
            params
          }])
          .then(res => {
            console.log(res, 'res')
            if (res.follow == 0) {
              const params = {
                _jv: {
                  type: 'follow',
                },
                type: 'user_follow',
                to_user_id: item.user.pid,
              };
              this.$store.dispatch('jv/post', params)
                .then(res => {

                });

            } else {
              this.$store.dispatch('jv/delete', `follow/${item.user.pid}/1`).then(() => {
                item.fromUser.follow = 0;
                this.$set(this.videoList, index, item);
              });
            }
          });

      },
      // 分享
      shareClick(item, index) {
        if (!this.$store.getters['session/get']('isLogin')) {
          uni.setStorage({
            key: 'page',
            data: getCurUrl(),
          });
          // #ifdef MP-WEIXIN
          this.mpLoginMode();
          // #endif
          // #ifdef H5 || APP-PLUS
          this.h5LoginMode();
          // #endif
        }

        // #ifdef H5 || APP-PLUS
        this.h5Share({
          title: item.thread.title,
          id: item.thread.firstPostId,
          url: '/mainpage/bbs/video?thread_id=' + this.thread_id,
        });

        // #endif
      },
      // 评论
      // commontAdd(pid) {
      //   this.commontShow = true;
      //   this.loadThread(pid);
      //   this.loadThreadPosts(pid)
      // },
      // 评论
      commontAdd(pid) {
        uni.navigateTo({
          url: `/topic/index?id=${pid}`,
        });
        // this.commontShow = true;
        // this.loadThread(pid);
        // this.loadThreadPosts(pid)
      },
      // 加载当前主题评论的数据
      async loadThreadPosts(pid) {
        const params = {
          page: this.comment_page,
          perPage: this.comment_pagesize,
          'filter[thread]': pid,
          sort: this.sortVal,
        };
        let self = this;
        this.$store.dispatch('jv/get', ['posts.v2', {
            params
          }])
          .then(res => {
            console.log(res);
            let data = res._jv.json.Data.pageData;

            data = this.modifyPostCommentHtml(data);
            console.log(data, 'data')
            // 过滤和精简数据
            const newData = [];
            data.forEach(item => {
              if (!item.isDeleted) {
                const {
                  isDeleted,
                  id,
                  user: {
                    id: userId,
                    avatar,
                    username,
                    isReal,
                    groups
                  },
                  canLike,
                  isLiked,
                  createdAt,
                  isApproved,
                  summary,
                  lastThreeComments,
                  likeCount,
                  images,
                  replyCount,
                  canHide,
                  rewards,
                  redPacketAmount,
                } = item;
                // 只保留一个用户组显示
                // const firstGroup = groups.filter(group => group.isDisplay).slice(0, 1);
                const newPost = {
                  isDeleted,
                  id,
                  user: {
                    id: userId,
                    avatar,
                    username,
                    isReal,
                    groups
                  },
                  canLike,
                  isLiked,
                  createdAt,
                  isApproved,
                  summary,
                  lastThreeComments,
                  likeCount,
                  images,
                  replyCount,
                  canHide,
                  rewards,
                  redPacketAmount,
                };

                newData.push(newPost);
              }
            });
            // console.log(newData);
            this.posts.push(...newData);
            this.splitLists[this.comment_page - 1] = newData;
            this.loadingType = newData.length === this.comment_pagesize ? 'more' : 'nomore';

            if (newData.length === 0) {
              this.contentnomoreVal = this.t.noComment;
            } else {
              this.contentnomoreVal = this.t.noMoreData;
            }
          });

      },
      // 加载当前主题数据
      loadThread(pid) {

        const params = {
          pid: pid
        }
        this.$store.dispatch('jv/get', ['threads.detail.v2', {
            params
          }])
          .then(res => {
            console.log('detail', res);
            this.thread = res._jv.json.Data;
          });
      },
      modifyPostCommentHtml(obj) {
        obj.forEach(item => {
          item.summary = modifyPostContentHtml(item.summary);
        });
        return obj;
      },
      // 主题回复
      threadComment(pid) {
        if (!this.$store.getters['session/get']('isLogin')) {
          uni.setStorage({
            key: 'page',
            data: getCurUrl(),
          });
          // #ifdef MP-WEIXIN
          this.mpLoginMode();
          // #endif
          // #ifdef H5 || APP-PLUS
          this.h5LoginMode();
          // #endif
        }

        // 判断是否需要绑定手机或实名认证
        if (!this.isPublishNeedRealName() || !this.isPublishNeedBindPhone()) return;
        if (this.thread.thread.canReply) {
          this.commentId = this.thread.id;
          this.formData.type = 1;
          this.$refs.commentPopup.open();
          this.commentPopupStatus = true;
          this.commentWorkTips = true;
          this.commentText = false;
          this.focusVal = true;
        } else {
          uni.showToast({
            'title': '不允许回复',
            duration: 2000,
          })

        }

      },
      // 评论的回复
      replyComment(postId, postIndex) {
        if (!this.$store.getters['session/get']('isLogin')) {
          uni.setStorage({
            key: 'page',
            data: getCurUrl(),
          });
          // #ifdef MP-WEIXIN
          this.mpLoginMode();
          // #endif
          // #ifdef H5 || APP-PLUS
          this.h5LoginMode();
          // #endif

          return;
        }

        // 判断是否需要绑定手机或实名认证
        if (!this.isPublishNeedRealName() || !this.isPublishNeedBindPhone()) return;


        if (!this.thread.thread.canReply) {
          this.$refs.toast.show({
            message: this.t.noReplyPermission
          });
        } else {
          this.commentReply = true;
          this.postIndex = postIndex;
          this.commentId = postId;
          this.$refs.commentPopup.open();
          this.commentPopupStatus = true;
          this.commentWorkTips = true;
          this.commentText = false;
          this.focusVal = true;
        }
      },
      // 主题回复，评论的回复调用接口
      postComment(thread_id) {
        console.log('thread', this.thread)
        if (this.textAreaValue.length < 1) {
          uni.showToast({
            'title': this.t.replyContentCannotBeEmpty,
            duration: 2000
          })
          this.publishClickStatus = true;
          return false;
        }
        let params = {};
        let jvObj = {
          type: 'posts.v2',
        }
        if (this.commentReply) {
          params = {
            id: parseInt(thread_id),
            content: this.textAreaValue,
            replyId: this.commentId,
            isComment: true,
          };
        } else {
          if (!this.commentAnser) {
            params = {
              id: parseInt(thread_id),
              content: this.textAreaValue,
            };
          }
        }
        params.attachments = [];
        if (this.uploadFile) {
          this.uploadFile.forEach(item => {
            params.attachments.push({
              type: 'attachments',
              id: item.id,
            });
          });
        }
        // this.$store.dispatch('jv/post', params)
        //   .then(res => {
        apiRequest.createPosts({
            data: params
          })
          .then(res => {
            if (res.Message === '操作太频繁了，请稍后再试') {
              this.$refs.commentPopup.close();
              this.publishClickStatus = true;
              this.textAreaValue = '';
              this.uploadFile = '';
              return;
            }
            this.$refs.commentPopup.close();
            this.commentReply = false;
            this.commentPopupStatus = false;
            this.publishClickStatus = true;
            if (res.Data.isApproved === 1) {
              if (!res.Data.isComment) {

                this.posts.push(res.Data);
                this.thread.thread.postCount += 1;
              } else {
                /**
                 * 原有逻辑是根据this.postIndex来判断，新的评论数据应该插入到数组的哪个位置。但是出现过二级评论错位的现象，注释原有逻辑后，表现正常。怀疑this.postIndex某些条件下会不准确
                 * 现有逻辑，根据数据源中的_jv.id来判断，新的评论数据应该插入到数组的哪个位置。_jv.id具有唯一性。暂时没有发现评论错位的现象
                 */
                for (let index = 0; index < this.posts.length; index++) {
                  const element = this.posts[index];
                  console.log(element, 'element');
                  if (element.id === this.commentId) {
                    if (!element.lastThreeComments) {
                      element.lastThreeComments = [];
                    }
                    element.lastThreeComments.unshift(res.Data);
                    element.replyCount += 1;
                    console.log('element11', element);
                    break;
                  }
                }
              }
            } else {
              this.$refs.toast.show({
                message: '您发布的内容正在审核中哦'
              });
            }

            this.textAreaValue = '';
            this.uploadFile = '';

            this.loadThreadPosts(this.thread.thread.id)
          })
          .catch(err => {
            this.publishClickStatus = true;
            console.log(err);
          });
      },
      // 删除评论
      deleteComment(postId, type, canStatus, isStatus, post) {
        if (!this.$store.getters['session/get']('isLogin')) {
          uni.setStorage({
            key: 'page',
            data: getCurUrl(),
          });
          // #ifdef MP-WEIXIN
          this.mpLoginMode();
          // #endif
          // #ifdef H5 || APP-PLUS
          this.h5LoginMode();
          // #endif
        }
        this.$refs.deletePopup.open();
        this.deleteId = postId;
        this.deleteType = '3';
        this.deletePostCanStatus = canStatus;
        this.deletePostIsStatus = isStatus;
        this.deletePost = post;
        this.deleteTip = this.i18n.t('core.deleteCommentSure');
        // this.postOpera(postId, '3', canStatus, isStatus, post);
      },
      // 跳转到评论详情页
      commentJump(postId) {
        let threadId = this.thread.thread.id;
        if (!this.$store.getters['session/get']('isLogin')) {
          uni.setStorage({
            key: 'page',
            data: getCurUrl(),
          });
          // #ifdef MP-WEIXIN
          this.mpLoginMode();
          // #endif
          // #ifdef H5 || APP-PLUS
          this.h5LoginMode();
          // #endif

          return;
        }
        uni.navigateTo({
          url: `/topic/comment?threadId=${threadId}&commentId=${postId}`,
        });
      },
      // post操作调用接口（包括type 1主题点赞，3删除回复，4回复点赞）
      postOpera(id, type, canStatus, isStatus, post) {
        if (type === '1' && !canStatus) {
          // 没有主题点赞权限
          this.$refs.toast.show({
            message: this.t.noThreadLikePermission
          });
          return;
        }
        if (type === '4' && !canStatus) {
          // 没有评论点赞权限
          this.$refs.toast.show({
            message: this.t.noReplyLikePermission
          });
          return;
        }
        const jvObj = {
          type: 'posts',
          id,
        };
        let params = {};
        if (type === '1') {
          params = {
            _jv: jvObj,
            isLiked: !isStatus,
          };
        } else if (type === '3') {
          params = {
            _jv: jvObj,
            isDeleted: !isStatus,
          };
        } else if (type === '4') {
          params = {
            _jv: jvObj,
            isLiked: !isStatus,
          };
        } else if (type === '10') {
          params = {
            _jv: jvObj,
            isApproved: 1,
          };
        }

        this.$store
          .dispatch('jv/patch', params)
          .then(data => {

          })
          .catch(err => {
            //删除的接口返回数据不标准
            console.log(err);
          });
      },
      // 判断是否需实名制
      isPublishNeedRealName() {
        console.log(this.forumsInfo)
        if (!this.forumsInfo.other.publish_need_real_name) {
          return true;
        }
        if (this.forumsInfo.other.publish_need_real_name) {
          if (!this.userInfo.isReal) {
            uni.showToast({
              'title': '请先实名认证',
              duration: 2000
            })

            return false;
          }
          if (this.userInfo.isReal) {
            return true;
          }
        }
      },
      // 判断是否需绑定手机
      isPublishNeedBindPhone() {
        if (!this.forumsInfo.other.publish_need_bind_phone) {
          return true;
        }
        if (this.forumsInfo.other.publish_need_bind_phone) {
          if (this.userInfo.mobile === "") {
            uni.showToast({
              'title': '请先绑定手机',
              duration: 2000
            })

            return false;
          }
          if (this.userInfo.mobile !== "") {
            return true;
          }
        }
      },
      // 主题评论点击发布事件
      publishClick() {
        this.publishClickStatus = false;
        if (this.commentAnser === true) {
          this.postAnswer();
        } else {
          this.postComment(this.thread.thread.id);
        }
      },
      // 获取站点信息
      getForumsInfo() {
        const params = {
          include: ''
        };
        this.$store.dispatch('jv/get', [`forum`, {
          params
        }]).then(res => {
          if (res && res._jv && res._jv.id) {
            this.forumsInfo = res;
            // console.log('站点信息', this.forumsInfo);
          }
        });
      },
      loadData: function() {
        let params = {
          'filter[type]': '2',
          'filter[approved]': 1,
          'page': this.page,
          'perPage': this.pageSize,

        };
        let that = this;
        this.$store.dispatch('jv/get', ['threads.v2', {
            params
          }])
          .then(res => {
            console.log(res);
            let data = res._jv.json.Data.pageData
            this.videoList = [...this.videoList, ...data];
            if (this.page == 1) {
              if (this.videoList.length > 0 && this.page == 1) {
                setTimeout(() => {
                  this.currentVideo = uni.createVideoContext(`video_${this.videoList[0].thread.pid}`, this);
                }, 500)
              }
            } else {
              if (data.length > 0)
                this.marginTop = this.fixMarginTop - this.windowHeight;
              this.currentIndex = this.currentIndex + 1;
              this.videoPlayChange();
              this.fixMarginTop = this.marginTop;
              this.startY = 0;
              this.moveY = 0;
            }

          });


      },
      handleClickCancel() {
        this.$refs.deletePopup.close();
      },
      // 删除
      handleClickOk() {
        console.log('del')
        this.$refs.deletePopup.close();

        if (this.deleteType === '4') {
          this.threadOpera(
            this.deleteId,
            this.deletePostCanStatus,
            this.deletePostIsStatus,
            this.deleteType,
          );
        } else if (this.deleteType === '3') {
          // 删除类型为主题评论
          this.postOpera(
            this.deleteId,
            '3',
            this.deletePostCanStatus,
            this.deletePostIsStatus,
            this.deletePost,
          );
        } else if (this.deleteType === 0) {
          // 确定删除
          // 删除类型为评论时上传的图片
          this.delAttachments(this.deleteImgId, this.deleteIndex).then(() => {
            this.$refs.upload.clear(this.deleteIndex);
            this.$refs.upload.getValue().forEach((value, key, item) => {
              value.id == this.deleteImgId && item.splice(key, 1);
            });
          });
        }
      },
      gotoBack() {
        uni.navigateBack({
          delta: 0
        })
      }

    },
    onPullDownRefresh() {
      this.page = 1;
      let self = this;
      setTimeout(function() {
        self.loadData();
        uni.stopPullDownRefresh();
      }, 1000);
    },
    onUnload() {
      if (this.currentVideo) {
        this.currentVideo.stop();
      }
    }
  }
</script>

<style lang="scss" scoped>
  // 喜欢按钮动画
  .iconxihuan {
    transition: all .3s;
  }

  .iconxihuan:active {
    transform: scale(2);
  }

  // 双击点赞样式
  .fabulous-item {
    position: absolute;
    z-index: 99999;
    width: 100rpx;
    height: 100rpx;
    color: red;
    font-size: 100rpx;
    transition: opacity .5s, transform .5s;
    opacity: 1;
  }


  .widget-video {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .btn-play {
      font-size: 80rpx;
      color: white;
      position: absolute;
      top: 50%;
      left: 50%;
      transition: all .3s;
      transform: translateX(-50%) translateY(-50%) scale(1.5);
      z-index: 8;
      opacity: 0;
    }

    .btn-play.show {
      opacity: 0.5;
      transform: translateX(-50%) translateY(-50%) scale(1);

    }
  }

  .fullscreen-video {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .video-info {
    width: 100rpx;
    position: absolute;
    right: 20rpx;
    bottom: 100rpx;

    .atavar-box {
      background-color: white;
      padding: 6rpx;
      border-radius: 100%;
      height: 100rpx;
      margin-bottom: 64rpx;

      .atavar-img {
        width: 100%;
        display: block;
        border-radius: 100%;
      }

    }

    .icon-box {
      width: 100rpx;
      height: 100rpx;
      margin-top: 40rpx;
      display: flex;
      align-items: center;
      justify-content: space-around;
      flex-direction: column;
      color: white;

      .icon-btn {
        font-size: 60rpx;
      }

      .count-text {
        font-size: 24rpx;
      }
    }

  }

  .video-title {
    position: absolute;
    left: 20rpx;
    bottom: 100rpx;
    width: calc(100% - 160rpx);
    color: white;

    .user-name {
      font-weight: bold;
    }

    .video-content {
      font-size: 24rpx;
    }
  }



  .head {
    position: absolute;
    left: 0rpx;
    top: 10rpx;
    width: 100%;
    color: white;
  }

  .follow {
    width: 40rpx;
    height: 40rpx;
  }

  .hart {
    width: 40rpx;
    height: 40rpx;
  }

  .message-box {
    display: flex;
    flex-direction: column;
    margin-top: 24px;
    text-align: center;
    color: #FFFFFF;
  }

  .message-box text {
    color: #FFFFFF;
    font-size: 16px;
    padding-top: 4px;
  }
  .video-box{
    width: 100vw;height: 100vh;
    display: flex;
  }
</style>
